<template>
    <div class="attr-item">
        <div class="header s-b">
            <attr-type-select 
                @change='changeHandle'
                v-model='attr_id'
                ></attr-type-select>
            <div>
                <el-button type='primary' @click='addAttr' v-if="showCreateBtn">添加规格</el-button>
                <el-button type='danger' v-if="showDeleteBtn" @click='deleteAttr'>删除规格</el-button>
            </div>
        </div>
        <div class="content">
            <template v-if="attrs.length">
                <div class="f-s" style="flex-wrap: wrap;">
                     <div class="item" v-for="(item) in attrs" :key='item._renderId'>
                        <div>
                            <el-input class="" v-model='item[`${item.id}`]' @input='valueChange(item)' @blur='createNewAttrValue'></el-input>
                            <!-- <el-button type='success' v-if="attrIndex == 0 && index == 0 && item[item.key]" @click='uploadMainImg(item)'>上传</el-button> -->
                            <el-button type='text' @click='deleteAttrValueItem(item)' v-if="attrs.length > 1">删除</el-button>
                        </div>
                    </div>
                </div>
            </template>
            <h1 class="gray-text text-center" v-else>请选择规格</h1>
        </div>
    </div>
</template>

<script>

    import attrTypeSelect from './attr-type-select';
    import {MAX_PRODUCT_ATTR_COUNT, PRODUCT_PARAMS} from '@const';
    import { nanoid } from 'nanoid';
    import { mapState } from 'vuex'

    export default {
        components : {
            attrTypeSelect
        },
        inject : ['parent'],
        props : {
            value : {
                type : Number,
                default : 0
            },
            //已选规格renderId
            renderId : {
                type :String,
                default : null
            },
            //是否显示添加规格按钮
            showCreateBtn : {
                type : Boolean,
                default : false,
            },
            //是否显示删除规格按钮
            showDeleteBtn : {
                type : Boolean,
                default : false
            },
            selectedAttrs : {
                type : Array,
                default : _ => []
            }
        },
        data () {
            return {
                MAX_PRODUCT_ATTR_COUNT,
                attr_id : null,
                attr_key : null,
                attrs : [],
            }
        },
        watch : {
            value : {
                handler : function (n,o) {
                    this.attr_id = n;
                },
                immediate : true
            },
            attr_id (n,o) {
                this.$emit('input', n);
                if (this.attrs.length && o) {
                    this.parent.tableData = this.parent.tableData.map(item => {
                        item[n] = item[o];
                        item[`${n}_value_id`] = item[`${o}_value_id`];
                        delete item[o];
                        delete item[`${o}_value_id`]
                        return item;
                    })

                    this.attrs = this.attrs.map(item => {
                        item.id = n;
                        item[n] = item[o];
                        item[`${n}_value_id`] = item[`${o}_value_id`];
                        delete item[o];
                        delete item[`${o}_value_id`]
                        return item;
                    })

                } else {
                    this._attrValueItemCreate();
                }

            },
            selectedAttrs : {
                handler : function (n) {
                    if (n && n.length) {
                        this.attrs = n
                    }
                },
                immediate : true
            },
        },
        computed : {
            ...mapState(['product']),
        },

        mounted () {
            // setTimeout(_ => {
            //     this.attr_key = this.product.selectAttrTypeOptions.length && this.attr_id
            //                     ? this.product.selectAttrTypeOptions.filter(item => item.id == this.attr_id)[0].key
            //                     : null;
                
            //     if (this.parent.tableData.length) {
            //         let attrs = [];

            //         this.parent.tableData.map(item => {
            //             if (item[this.attr_id] && !attrs.some(v => v.value == item[this.attr_id])) {
            //                 attrs.push({
            //                     key : this.attr_id,
            //                     [`${this.attr_id}_value_id`] : item[`${this.attr_id}_value_id`],
            //                     id : this.attr_id,
            //                     _renderId : nanoid(),
            //                     value : item[this.attr_id]
            //                 })
            //             }
            //         })

            //         this.attrs = attrs;
            //         console.log(this.attrs);
            //     }
            // },0)   
        },
        methods : {
            //规格选择或修改
            changeHandle ({id}) {
                // console.log(id, this.attr_id);
                // if (this.attr_id) { //如果原来已经有key了，就是要更新key的值
                    
                //     this.parent.tableData = this.parent.tableData.map(item => {
                //         item[attr_id] = item[`${this.attr_id}`];
                //         item[`${attr_id}_value_id`] = item[`${this.attr_id}_value_id`];
                //         delete item[`${this.attr_id}`];
                //         delete item[`${this.attr_id}_value_id`]
                //         return item;
                //     })

                //     this.attrs = this.attrs.map(item => {
                //         item.key = id;
                //         item[key] = item[`${this.attr_id}`];
                //         item[`${key}_value_id`] = item[`${this.attr_key}_value_id`];
                //         delete item[`${this.attr_key}`];
                //         delete item[`${this.attr_key}_value_id`]
                //         return item;
                //     })
                //     this.attr_key = id;
                //     this.attr_id = id;
                // } else { //如果原来没有key，就是创建
                //     this.attr_key = key;
                //     this._attrValueItemCreate();
                // }
                
                
            },
            //添加一个规格
            addAttr () {
                this.$emit('add-attr')
            },
            //删除一个规格
            deleteAttr () {
                this.$emit('delete-attr', this.renderId);
                
            },
            //改变输入的值
            valueChange (item) {
                this.parent._attrValueChange(item);
            },
            //创建新的规格值
            createNewAttrValue () {
                if (this.attrs.every(v => v[v.id])) {
                    this._attrValueItemCreate();
                }
            },
            //删除属性值
            deleteAttrValueItem (item) {
                this.attrs = this.attrs.filter(v => v._renderId != item._renderId);
                this.parent._attrValueDelete(item);
            },
            _attrValueItemCreate () {
                this.attrs = [...this.attrs, {
                    [this.attr_id] : null,
                    id : this.attr_id,
                    [`${this.attr_id}_value_id`] : `${this.attr_id}_${nanoid()}`,
                    _renderId : nanoid(),
                }]
            }
        }
    }
</script>

<style lang='less' scoped>
    .attr-item {
        padding: 15px;
        background: #fff;
        border-bottom: 1px solid #eee;
        .header {
            padding-bottom: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
        .content {
            padding-top: 10px;
            .item {
                margin-right: 30px;
                margin-bottom: 10px;
            }
            .el-input {
                width: 185px;
            }
            .tips {
                font-size: 12px;
            }
        }
    }
    
</style>